<%@ page import="bean.User" %>
<%@ page import="bean.Article" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="bean.Category" %>
<%@ page import="bean.Label" %><%--
  Created by IntelliJ IDEA.
  User: 蒋缇
  Date: 2020/10/17
  Time: 17:34
  To change this template use File | Settings | File Templates.
--%>
<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    User user=(User)session.getAttribute("user");
    ArrayList<Article> articleArrayList=(ArrayList<Article>)session.getAttribute("userArticles");
    ArrayList<Article> articleCollections=(ArrayList<Article>)session.getAttribute("userCollections");
    ArrayList<Article> articleLikes=(ArrayList<Article>)session.getAttribute("userLikes");
    ArrayList<Category> articleCategories=(ArrayList<Category>)session.getAttribute("userCategories");
    ArrayList<Label> labels=(ArrayList<Label>)session.getAttribute("userLabels");
%>
<html>
<head>
    <title>我的标签</title>
    <link rel="stylesheet"  href="css/bootstrap.min.css"/>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/allStyle.css">
</head>
<body>
<%--    导航条--%>
<div class="row">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <%--                    TBLOG标签--%>
                <a class="navbar-brand" href="#">TBLOG</a>
            </div>
            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <%--                    主页链接--%>
                <ul class="nav navbar-nav">
                    <li><a href="websiteHomepage.jsp">首页🏠</a></li>
                    <%--                        下拉菜单--%>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">其他 <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <%--                     搜索栏--%>
                <form class="navbar-form navbar-left">
                    <input type="text" id="searchContent" class="form-control" size="125" maxlength="200" placeholder="请输入您想查询的内容">
                    <button type="button" class="btn btn-default" onclick="search()">🔍</button>
                </form>
                <%--                    链接--%>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="writeBlogPage.jsp">创作中心</a></li>
                    <%--                        下拉菜单--%>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><img src="<%=user.getHeadPortrait().equals("")?"images/defaultHeadPortrait.jpg":user.getHeadPortrait()%>" alt="无法加载" class="img-circle" width="20px" height="20px"><span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="personalHompage.jsp">个人中心</a></li>
                            <li><a href="loginPage.jsp">账号设置</a></li>
                            <li><a href="forgetPage.jsp">找回密码</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="successPage.jsp">退出</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
</div>
<br><br><br>
<%--        头像--%>
<div class="row">
    <div class="col-lg-3"></div>
    <div class="col-lg-3">
        <img src="<%=user.getHeadPortrait().equals("")?"images/defaultHeadPortrait.jpg":user.getHeadPortrait()%>" id="headPortrait"alt="无法加载" class="img-circle" width="80px" height="80px" ondblclick="$('#headPortraitFile').click()">
        <span><%=user.getAccount()%></span><br>
        <input type="file" id="headPortraitFile" style="display: none"  name="upload"  accept="image/jpg,image/png,image/jpeg,image/bmp,image/gif,image/webp">
    </div>
</div>

    <div class="row">
        <div class="col-lg-2"></div>
        <div class="col-lg-1">
            <ul class="list-group" id="mySelect">
                <li class="list-group-item "   style="background-color: white"><a style="text-decoration: none;color: black" href="<%=basePath%>personalHompage.jsp">个人资料</a></li>
                <li class="list-group-item "   style="background-color: white"><a style="text-decoration: none;color: black" href="<%=basePath%>myBlogPage.jsp">我的博客</a></li>
                <li class="list-group-item "   style="background-color: #E83737"><a style="text-decoration: none;color: black" href="<%=basePath%>blogLabelPage.jsp">我的标签</a></li>
                <li class="list-group-item "   style="background-color: white"><a style="text-decoration: none;color: black" href="<%=basePath%>blogCategoryPage.jsp">分类专栏</a></li>
                <li class="list-group-item"    style="background-color: white"><a style="text-decoration: none;color: black" href="<%=basePath%>myCollection.jsp">我的收藏</a></li>
            </ul>
        </div>
        <div class="col-lg-6">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-lg-10"><h4><b>我的标签</b></h4></div>
                        <div class=col-lg-2"><button type="button" data-toggle="modal" data-target="#addModal" class="btn btn-danger">新建标签</button></div>
                    </div>
                    <ul class="list-group">
                        <%
                            for(Label label:labels){
                                if(label.getContent().equals("java")){
                        %>
                        <li class="list-group-item">
                            <div class="row">
                                <div class="col-lg-8"><%=label.getContent()%></div>
                            </div>
                        </li><hr>
                        <%
                            }else{
                        %>
                        <li class="list-group-item">
                            <div class="row">
                                <div class="col-lg-8"><%=label.getContent()%></div>
                                <div class="col-lg-4">
                                    <button class="btn btn-default" onclick="loadModal('<%=label.getContent()%>','<%=label.getId()%>')">编辑</button>
                                    <button class="btn btn-default" onclick="deleteLabel('<%=label.getId()%>')">删除</button>
                                </div>
                            </div>
                        </li><hr>
                        <%
                        } }
                        %>
                    </ul>
                </div>
            </div>
        </div>
        <div class="col-lg-3"></div>
    </div>
    <%--新建分栏模态框--%>
    <div class="modal fade" tabindex="-1" id="addModal" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">新建标签</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-3"><span>标签名称</span></div>
                        <div class="col-lg-9">
                            <input class="form-control" id="addLabelName">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" onclick="addLabel()">新建标签</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <%--编辑分栏模态框--%>
    <div class="modal fade" tabindex="-1" id="updateModal" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">修改标签</h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-lg-3"><span>标签名称</span></div>
                        <div class="col-lg-9"><input class="form-control" id="updateLabelName">
                            <input style="display: none" id="updateLabelId"></div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" onclick="updateLabel()">修改标签</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    <script type="text/javascript">
        function loadModal(content,id){
            document.getElementById("updateLabelName").value=content;
            document.getElementById("updateLabelId").value=id;
            $('#updateModal').modal('show');
        }
        /*修改标签*/
        function updateLabel(){
            let content=document.getElementById("updateLabelName").value;
            let id=document.getElementById("updateLabelId").value;
            let flag=0;
            <%
                for(Label label:labels){
            %>
            if(content==="<%=label.getContent()%>"){
                flag=1;
            }
            <%
            }
            %>
            if(flag===1){
                alert("标签不能重复");
                return;
            }else{
                if(content===""){
                    alert("标签不能为空");
                    return ;
                }else{
                    $.ajax(
                        {
                            data: {"updateArticleLabelContent": content,"updateArticleLabelId":id},
                            dataType: 'text',
                            type: 'post',
                            url: '<%=basePath%>UpdateLabelServlet',
                            success: function () {
                                alert("修改成功");
                                window.location = "<%=basePath%>blogLabelPage.jsp";
                            },
                            error: function () {
                                alert("修改失败");
                            }
                        }
                    );
                }
            }
        }
        /*添加标签*/
        function addLabel(){
            let content=document.getElementById("addLabelName").value;
            let flag=0;
            <%
                for(Label label:labels){
            %>
            if(content==="<%=label.getContent()%>"){
                flag=1;
            }
            <%
            }
            %>
            if(flag===1){
                alert("标签不能重复");
                return;
            }else{
                if(content===""){
                    alert("标签不能为空");
                    return ;
                }else{
                    $.ajax(
                        {
                            data: {"addArticleLabelContent": content},
                            dataType: 'text',
                            type: 'post',
                            url: '<%=basePath%>AddLabelServlet',
                            success: function () {
                                alert("添加成功");
                                window.location = "<%=basePath%>blogLabelPage.jsp";
                            },
                            error: function () {
                                alert("添加失败");
                            }
                        }
                    );
                }
            }
        }
        /*删除标签*/
        function deleteLabel(id){
            $.ajax(
                {
                    data: {"deleteArticleLabelId":id},
                    dataType: 'text',
                    type: 'post',
                    url: '<%=basePath%>DeleteLabelServlet',
                    success: function () {
                        alert("删除成功");
                        window.location = "<%=basePath%>blogLabelPage.jsp";
                    },
                    error: function () {
                        alert("删除失败");
                    }
                }
            );
        }
    </script>
</body>
</html>
